<template>
  <div class="pages salesorder">
    <div class="pageLevel" v-if="!sub">

      <!-- 操作框 -->
      <div class="tableSearch">
        <el-button type="primary" @click="routerPushAdd()" size="mini" v-if='setRole("新增")'>新增</el-button>
      </div>
      <!-- 搜索框 -->
      <div class="tableSearch">
        <el-form size="mini">
          <!-- 通过销售订单号搜索 -->
          <el-form-item label="">
            <el-input v-model="selectData.salekeyword" placeholder="请输入销售订单号"></el-input>
          </el-form-item>
          <!-- 搜索按钮 -->
          <el-form-item label="" label-width="15px">
            <el-button type="primary" size="mini" @click="searchSales">搜索</el-button>
          </el-form-item>
          <!-- 高级搜索 -->
          <el-form-item label="" label-width="15px">
            <el-button type="primary" size="mini" @click="showSearchHigh = !showSearchHigh">高级</el-button>
          </el-form-item>
        </el-form>
      </div>
      <div class="tableSearch" v-show="showSearchHigh">
        <el-form size="mini">
          <!-- 通过订单状态搜索 -->
          <el-form-item label="订单状态" label-width="80px" style="width:220px;">
            <el-select v-model="selectData.saleStatus" style="width:135px;">
              <el-option label="全部" value=""></el-option>
              <el-option v-for="(item, index) in orderSaleStatusArr" :key="index" :label="item" :value="index"></el-option>
            </el-select>
          </el-form-item>
        </el-form>
      </div>
     <!-- 表格 -->
      <div class="tableMain">
        <el-table :data="saleOrderListArray" stripe>
          <el-table-column type="index" label="序号" align="center" width="55"></el-table-column>
          <el-table-column prop="saleCode" label="销售订单号" align="center"></el-table-column>
          <el-table-column prop="orderDate" label="单据时间" :formatter="tim" align="center"></el-table-column>
          <el-table-column prop="shopName" label="客户" align="center"></el-table-column>
          <el-table-column prop="confirmAmount" label="确认应收总计" align="center"></el-table-column>
          <el-table-column prop="statusFlow"  label="订单状态" align="center">
             <template slot-scope="scope">
              <span>{{orderSaleStatusArr[scope.row.statusFlow]}}</span>
            </template>
          </el-table-column>
          <el-table-column prop="saleType" :formatter="saleType" label="单据来源" align="center"></el-table-column>
          <el-table-column prop="purchaseCode" label="来源单号" align="center">
          </el-table-column>
          <el-table-column prop="userName" label="操作员" align="center"></el-table-column>
          <el-table-column label="操作" align="center">
            <template slot-scope="scope">
              <el-button size="mini" @click="routerPushInfo(scope.row.id)" type="text">查看</el-button>
              <el-button size="mini" v-if='setRole("修改")' v-show="scope.row.statusFlow==0&&scope.row.saleType==1" @click="routerPushInfoedit(scope.row.id)" type="text">修改</el-button>
            </template>
         </el-table-column>
        </el-table>
        <!-- 页码 -->
        <page-unit :pageData="pageData" :func="getSaleOrderList"></page-unit>
      </div>
    </div>
    <div class="pageLevel" v-else>
      <router-view></router-view>
    </div>
  </div>
</template>
<script>
import { mapState } from "vuex";
import utils from "@/util/state";
import util from "@/util";
import pageUnit from "@/components/Page";
import { getGoodsSaleListPage } from "@/api";
export default {
  computed: mapState(["sub", "merchantId", "power"]),
  components: { pageUnit },
  data() {
    return {
      selectData: {
        // 搜索关键字
        salekeyword: "",//销售订单号
        saleStatus: "",//订单状态
      },
      pageData: {
        pageSize: 20,
        currentPage: 1,
        totalItems: 0,
        pageSizeArr: [5, 10, 20]
      },
      showSearchHigh: false, // 是否显示高级查询
      saleOrderListArray: [], // 销售列表数组
      saleType: utils.saleType,//订单来源
      orderSaleStatusArr: utils.orderSaleStatusArr,//订单状态数组
    };
  },
  mounted() {
    this.getSaleOrderList(this.pageData.pageSize, 1);
  },
  watch: {
    sub: {
      handler: function(val, oldVal) {
        if (oldVal != null && val == false) {
          this.getSaleOrderList(this.pageData.pageSize, this.pageData.currentPage);
        }
      },
      deep: true
    }
  },
  methods: {
    // 分配权限
    setRole(key) {
      return util.selectTitle(this.power, key);
    },
    //单据时间
    tim(row) {
      return util.foryear(row.orderDate);
    },
    // 获取销售列表数据
    getSaleOrderList(pageSize, pageNum) {
      let Data = {
        pageNum: pageNum,
        pageSize: pageSize,
        saleCode: this.selectData.salekeyword, // 销售订单号
        statusFlow: this.selectData.saleStatus, // 订单状态
        supplierId: this.merchantId
      };
      getGoodsSaleListPage(Data).then(res => {
        if (res.data) {
          this.saleOrderListArray = res.data.list;
          this.pageData.totalItems = res.data.pageTotal;
        }
      });
    },
    // 查询
    searchSales() {
      this.pageData.currentPage=1
      this.getSaleOrderList(this.pageData.pageSize, this.pageData.currentPage);
    },
    // 路由
    routerPushAdd() {
      util.routerTo(
        "/order-center/sale-management/sale-salesorder/sale-saleOrderAdd"
      );
    },
    routerPushInfo(id) {
      util.routerTo(
        "/order-center/sale-management/sale-salesorder/sale-saleOrderLook",
        {
          id: id
        }
      );
    },
    routerPushInfoedit(id) {
      util.routerTo(
        "/order-center/sale-management/sale-salesorder/sale-saleOrderEdit",
        {
          id: id
        }
      );
    }
  }
};
</script>
